<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="../css/demo.css" />
    
    <title>Jslet - 编辑动作列</title>
    <script type="text/javascript" data-main="../config.js" src="../lib/requirejs/require.min.js"></script>
    <script type="text/javascript">
	    require(['dataset/b-action']);
    </script>
</head>
<body>
    <div class="demo-header">
    <h4 id="top">Jslet - 动作列</h4>
	</div>
	<hr />
	<div class="demo-desc">
	<p>用于在表格中增加一列，用于对表格里的数据进行操作的列，定义非常简单，在主表里增加一个DataType = 'A' 类型的字段即可;</li>
	</div>
	<h4>销售主表</h4>
	<div id="tblMaster" data-jslet="type: 'DBTable', dataset: 'salesMaster', editable: true" style="height: 150px"></div>
	<h4>销售明细表</h4>
	<div id="tblDetail" data-jslet="type: 'DBTable', dataset: 'salesDetail', editable: true" style="height: 150px"></div>
	<h4>源码</h4>
    <pre class="prettyprint linenums"><code>
		var detailFldCfg = [
			//编辑动作列
			{name: 'action', dataType: 'E'},
			{name: 'seqno', dataType: 'N', label: '序号'},
			{name: 'product', dataType: 'S', label: '货物名称', length: 20},
			{name: 'qty', dataType: 'N', label: '数量', length: 11, defaultValue: 2},
			{name: 'price', dataType: 'N', label: '价格', length: 11, scale: 2},
			{name: 'amount', dataType: 'N', label: '金额', length: 11, scale: 2, 
				formula: '[qty]*[price]', aggraded: true, displayFormat: '#,##0.00'}
		];
		
		new jslet.data.Dataset({name: 'salesDetail', fields: detailFldCfg});
		//销售主表字段定义
		var fieldCfg = [
			//编辑动作列，包含“审核”和“取消审核”两个按钮
			{name: 'action', dataType: 'A', fixedValue: '<button id="btnAudit" class="btn btn-default btn-sm">审核</button> <button id="btnCancelAudit" class="btn btn-default btn-sm">取消审核</button>'},
			{name: 'saleid', dataType: 'S', label: 'Sales ID'},
			{name: 'saledate', dataType: 'D', label: 'Sales Date', displayFormat: 'yyyy-MM-dd'},
			{name: 'customer', dataType: 'S', label: 'Customer', length: 20, lookup: {dataset: 'customer'}},
			{name: 'paymentterm', dataType: 'S', label: 'Payment Term', lookup: {dataset: 'paymentTerm'}},
			//主表中增加一个DataType为'V'类型的字段details，用来指向明细数据集：salesDetail
			{name: 'details', dataType: 'V', label: 'details', detailDataset: 'salesDetail'},
			{name: 'comment', dataType: 'S', length: 20, label: 'comment'}
		];
	
		var dsMaster = new jslet.data.Dataset({name: 'salesMaster', fields: fieldCfg});
		//给动作列里按钮绑定事件
	    jQuery('#tblMaster').on('click', 'button[name=btnAudit]', function() {
	    	//由于JavaScript的事件冒泡机制，需先让表格的光标定位到正确位置后再执行按钮事件，故按钮事件需要延时执行。
	    	window.setTimeout(function() {
	        	jslet.ui.info('审核单据：' + dsMaster.getFieldValue('saleid'));
	    	}, 10);
	    });
	    
	    jQuery('#tblMaster').on('click', 'button[name=btnCancelAudit]', function() {
	    	//由于JavaScript的事件冒泡机制，需先让表格的光标定位到正确位置后再执行按钮事件，故按钮事件需要延时执行。
	    	window.setTimeout(function() {
	        	jslet.ui.info('取消审核单据：' + dsMaster.getFieldValue('saleid'));
	    	}, 10);
	    });
	</code></pre>

    <script type="text/javascript">
		window.LOADER_BASE_URL = "../lib/prettify";
    </script>
    <script type="text/javascript" src="../lib/prettify/run_prettify.js"></script>
		
</body>
</html>
